var getTag = function(id){
    return document.getElementsByTagName(id);
};
var getDom = function(id){
    return document.getElementById(id);
}
var li=getTag('li');
var ul=getTag('ul');
for(i=3;i<li.length;i++){
    li[i].addEventListener('click',function myAddEvent(){
            for (i=0;i<li.length;i++) {
                if(li[i]!=this){
                    li[i].style.backgroundColor="white";
                }
                else{
                    li[i].style.backgroundColor ="#F1F4F6";
                }
            }
    });
}
var input=getDom('input');
var li1=getDom('li1');
var li2=getDom('li2');
var li3=getDom('li3');
var list=getDom('list');
function Offset(off){
   // list.style.left=off+"px";
    $('#list').animate({left:off+"px"},1000);
}
li2.onclick=function(){
   li2.style.borderBottomColor="#5B9BEC";
    li1.style.borderBottomColor="";
    li3.style.borderBottomColor="";
    Offset(-400);

}
li1.style.borderBottomColor="#5B9BEC";
li1.onclick=function(){
    Offset(0);
    li2.style.borderBottomColor="";
    li1.style.borderBottomColor="#5B9BEC";
    li3.style.borderBottomColor="";
}
li3.onclick=function(){
    Offset(-800);
    li2.style.borderBottomColor="";
    li1.style.borderBottomColor="";
    li3.style.borderBottomColor="#5B9BEC";
}
input.onkeyup=function(){
    input.value=(input.value.toUpperCase(input.value));
}
